---
id: unit5
title: 自动编译
---

每次文件更改后都需要`npm run build` 会显得很麻烦。

webpack 提供几种可选方式，帮助你在代码发生变化后自动编译代码：

- webpack watch mode(webpack 观察模式)
- webpack-dev-server
- webpack-dev-middleware

## 使用 webpack-dev-server

`npm install --save-dev webpack-dev-server@3`

```js
// webpack.config.js
module.exports = {
    mode: 'development',
    entry: {
      app: './src/index.js',
    },
    devtool: 'inline-source-map',
+   devServer: {
+     contentBase: './dist'
+   },
}
```

```json
// package.json
"scripts": {
    "start": "webpack-dev-server"
}
```

其余两种方式可 看官网链接 [自动编译](https://v4.webpack.docschina.org/guides/development/)
